{% include "header.html" %}
<div class="container">
    <div class="box box-warning">
        <div class="box-header">
            <div class="text-center">
                <span class="h-title">授课计划</span>
                <div id="loading" class="hidden" style="position: absolute; right: 15px; top: 12px;">
                    <img class="" width="20" src="/static/images/loading.jpg" alt="上传中">
                </div>
            </div>
        </div>
        <div class="box-body">
            <div class="select-group text-right">
                <span style="color: #d98103;">年度：</span>
                <select class="form-control">
                    {% for foo in data.years %}
                        {% if loop.index > 1 %}
                            <option {% if data.years[0] == foo.k_time %}selected{% endif %}>
                                {{ foo.k_time }}年度
                            </option>
                        {% endif %}
                    {% else %}
                        <option>无课程</option>
                    {% endfor %}
                </select>
            </div>
            <ul class="list-unstyled">
                {% if not data.clz_list or data.clz_list.total <= 0 %}
                    <li>
                        <div class="alert alert-xs label-warning text-white">
                            今年无课程
                        </div>
                    </li>
                {% else %}
                    {% for k in data.clz_list.result %}
                        <li>
                            <div class="class-box bg-color-{{ k.k_status }}">
                                <div class="class-up">
                                    <p>{{ k.k_name }}</p>
                                    <p>
                                        <span>老师：{{ k.k_teacher }}</span>
                                        <span>时间：{{ k.k_time }}</span>
                                    </p>
                                </div>
                                <div onclick="show_w(this);" class="class-down clearfix">
                                    <p>作业提交期限: {{ k.k_work_endtime }}</p>
                                    <p>
                                        <span class="status"></span>
                                    </p>
                                </div>
                                <div style="display: none;" class="class-work clearfix">
                                    <h5>作业安排:</h5>
                                    <div data-work="{{ k.k_work }}"></div>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                {% endif %}
            </ul>
            {% include "sign.html" %}
        </div>
    </div>
</div>
<script>
    function transformWork() {
        var $divs = $('.class-work div');
        $.each($divs, function (k, v) {
            $(v).html($(v).data('work'));
            $(v).removeAttr('data-work');
        });
    }
    transformWork();
    function show_w(self) {
        $(self).next('div').toggle();
    }

    var $load = $('#loading');
    $('select').change(function () {
        var year = $(this).val().substring(0, 4);
        getData(1, year)
    });

    function getData(page, year, status) {
        d = {page: page, year: year};
        if (status >= 0) {
            d['status'] = status;
        }
        $.ajax({
            url: '/class/page',
            type: 'post',
            dataType: 'json',
            data: d,
            beforeSend: function () {
                $load.removeClass('hidden');
            },
            success: function (data) {
                fillData(data);
            },
            complete: function () {
                $load.addClass('hidden');
            }
        });
    }

    function fillData(data) {
        var $ul = $('.list-unstyled');
        if (data.status) {
            $ul.html('');
            $.each(data.pages.result, function (i, k) {
                console.log(k);
                var li = '<li>\n' +
                    '         <div class="class-box bg-color-' + k.k_status + '">\n' +
                    '              <div class="class-up">\n' +
                    '                  <p>' + k.k_name + '</p>\n' +
                    '                  <p>\n' +
                    '                      <span>老师：' + k.k_teacher + '</span>\n' +
                    '                      <span>时间：' + k.k_time + '</span>\n' +
                    '                   </p>\n' +
                    '               </div>\n' +
                    '               <div onclick="show_w(this);" class="class-down clearfix">\n' +
                    '                    <p>作业提交期限: ' + k.k_work_endtime + '</p>\n' +
                    '                    <p>\n' +
                    '                         <span class="status"></span>\n' +
                    '                    </p>\n' +
                    '                </div>\n' +
                    '               <div style="display: none;" class="class-work clearfix">\n' +
                    '                    <h5>作业安排:</h5>\n' +
                    '                    <div data-work="' + k.k_work + '"></div>\n' +
                    '               </div>' +
                    '           </div>\n' +
                    '      </li>';
                $ul.append(li);
            });
            transformWork();
        }
    }
</script>
</body>
</html>